<template>
  <div class="demo">
    <div class="demo-title">总结栏</div>
    <div class="demo-content">
      <Table :columns="columns" :data-source="data" :pagination="false" bordered>
        <template #summary>
          <Table.Summary.Row>
            <Table.Summary.Cell>Total</Table.Summary.Cell>
            <Table.Summary.Cell>
              <Typography.Text type="danger">{{ totals.totalBorrow }}</Typography.Text>
            </Table.Summary.Cell>
            <Table.Summary.Cell>
              <Typography.Text>{{ totals.totalRepayment }}</Typography.Text>
            </Table.Summary.Cell>
          </Table.Summary.Row>
          <Table.Summary.Row>
            <Table.Summary.Cell>Balance</Table.Summary.Cell>
            <Table.Summary.Cell :col-span="2">
              <Typography.Text type="danger">
                {{ totals.totalBorrow - totals.totalRepayment }}
              </Typography.Text>
            </Table.Summary.Cell>
          </Table.Summary.Row>
        </template>
      </Table>
      <br />
      <Table
        :columns="fixedColumns"
        :data-source="fixedData"
        :pagination="false"
        :scroll="{ x: 2000, y: 500 }"
        bordered
      >
        <template #summary>
          <Table.Summary fixed>
            <Table.Summary.Row>
              <Table.Summary.Cell :index="0">Summary</Table.Summary.Cell>
              <Table.Summary.Cell :index="1">This is a summary content</Table.Summary.Cell>
            </Table.Summary.Row>
          </Table.Summary>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import Typography from '@sscd/typography';
  import Table from '@sscd/table';
  import type { TableColumnsType } from '@sscd/table';
  const columns = ref<TableColumnsType>([
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Borrow',
      dataIndex: 'borrow',
    },
    {
      title: 'Repayment',
      dataIndex: 'repayment',
    },
  ]);
  const data = ref([
    {
      key: '1',
      name: 'John Brown',
      borrow: 10,
      repayment: 33,
    },
    {
      key: '2',
      name: 'Jim Green',
      borrow: 100,
      repayment: 0,
    },
    {
      key: '3',
      name: 'Joe Black',
      borrow: 10,
      repayment: 10,
    },
    {
      key: '4',
      name: 'Jim Red',
      borrow: 75,
      repayment: 45,
    },
  ]);
  const fixedColumns = ref<TableColumnsType>([
    {
      title: 'Name',
      dataIndex: 'name',
      fixed: true,
      width: 100,
    },
    {
      title: 'Description',
      dataIndex: 'description',
    },
  ]);
  const fixedData = ref<{ key: number; name: string; description: string }[]>([]);
  for (let i = 0; i < 20; i += 1) {
    fixedData.value.push({
      key: i,
      name: ['Light', 'Bamboo', 'Little'][i % 3],
      description: 'Everything that has a beginning, has an end.',
    });
  }
  const totals = computed(() => {
    let totalBorrow = 0;
    let totalRepayment = 0;
    data.value.forEach(({ borrow, repayment }) => {
      totalBorrow += borrow;
      totalRepayment += repayment;
    });
    return { totalBorrow, totalRepayment };
  });
</script>
<style lang="less">
  .demo tfoot th,
  .demo tfoot td {
    padding: 16px 16px;
    background: #fafafa;
  }
</style>
